<template>
  <div class="box-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <Search
      ref="topSearch"
      class="search"
      placeholder="工单编号|生产物料|工序名称|批次编号"
      :isAdd="false"
      :isScreen="true"
      :isType="true"
      @onSearch="onSearch"
      @onScreen="onScreen"
    ></Search>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-checkbox
        title="处理方式"
        :selectValue="selectedList"
        :columns="options1"
        @comfirm="comfirmType"
      ></van-dropdown-checkbox>
      <van-dropdown-checkbox
        title="执行状态"
        :selectValue="selectedList2"
        :columns="options2"
        @comfirm="comfirmType2"
      ></van-dropdown-checkbox>
    </van-dropdown-menu>
    <search-tag
      ref="SearchTag"
      :propsForSon="propsForSon"
      @resetCategory="resetCategory"
      @getCategory="getCategory"
      v-show="showSearchTag"
    ></search-tag>

    <!--分页列表 -->
    <div class="listBox" :style="{height: GLOBAL.currentEnvironment ? 'calc(100vh - 1rem)' : 'calc(100vh - 1.5rem)'}">
      <pageList
        ref="pageList"
        :checkedShow="checkedShow"
        :operationTxt="operationTxt"
        :columns="columns"
        :listUrl="listUrl"
        @getCheckedValue="getCheckedValue"
        @handleList="handleList"
        :minLen="3"
      >
        <div
          slot="foot"
          slot-scope="{ item }"
          @click.stop="actions(item)"
          class="foot-slot"
        >
          <span></span>{{ asyncBtn(item) }}
        </div>
      </pageList>
    </div>
    <van-dialog
      v-model="showDialog"
      show-cancel-button
      confirm-button-color="#1890FF"
      @confirm="compromising"
    >
      <div
        slot="title"
        style="
          text-align: left;
          margin: 0.1rem 0.19rem;
          color: #191f25;
          font-size: 0.16rem;
        "
      >
        <van-icon name="question-o" size="0.20rem" color="#FF943E" /><span
          style="margin-left: 0.07rem"
          >确定接收吗？</span
        >
      </div>
      <div style="margin: 0.1rem 0.46rem 0.3rem 0.46rem; color: #888888">
        确定接收后，相关不合格品将以合格品继续向下流转
      </div>
      <div style="background: #f0f0f0; width: 100%; height: 0.01rem"></div>
    </van-dialog>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { messNotQualityHandleIinfoDetailExecuteCompromise } from "@/api/system";
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
export default {
  name: "carRoomList",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
  },
  data() {
    return {
      title: "不合格品处理待执行",
      rtitle: "",
      rname: "", //search
      active: "0",
      checkedShow: false, //列表是否支持选择
      operationTxt: "", //选择按钮名称
      listUrl: "/mess/messNotQualityHandleIinfoDetail/executeList", //列表接口
      columns: {
        titleKey: "orderCode", //标题
        subtitleKey: "processFullName", //副标题
        content: [
          //内容
          {
            name: "生产物料",
            key: ["goodsName"],
          },
          {
            name: "处理数量",
            key: ["num", "reportWorkUnitText"],
          },
          {
            name: "展示批次",
            key: ["batchCode", "batchId"],
          },
        ],
        labelKey: ["handleTypeText", "executorStatusText"], //标签
        // operation: [],
      },
      showSearchTag: false,
      keyword: "",
      params: {
        handleType: "",
        executorStatus: "wait_execute",
      },
      options1: [
        { text: "返修", value: "repair" },
        { text: "让步接收", value: "compromise" },
        { text: "报废", value: "scrap" },
      ],
      options2: [
        { text: "已执行", value: "already_execute" },
        { text: "待执行", value: "wait_execute" },
      ],
      propsForSon: {},
      showDialog: false, // 确定接收弹窗
      compromisingItem: "", // 确定接收id
      checkedAll: false,
      selectedList: [],
      checkedAll2: false,
      selectedList2: ['wait_execute'],
    };
  },
  // 路由返回时先判断当前页是否存在弹窗，有就先关闭弹窗不返回，直到所有弹窗关闭再返回
  beforeRouteLeave(to, from, next) {
    let that = this;
    switch (true) {
      // that.showSearchTag是当前页的筛选弹窗，that.$refs.SearchTag.ddthrVisible是子组件筛选弹窗内的其他弹窗例如人员选择
      case that.showSearchTag && !that.$refs.SearchTag.ddthrVisible:
        that.showSearchTag = false;
        this.title = "不合格品处理待执行";
        next(false);
        break;
      case that.$refs.SearchTag.ddthrVisible:
        that.$refs.SearchTag.ddthrVisible = false;
        this.title = "更多筛选";
        next(false);
        break;
      case !that.showSearchTag:
        next();
        break;
    }
  },
  watch: {
    // selectedList(v) {
    //   if (v.length == this.options1.length) {
    //     this.checkedAll = true;
    //   } else {
    //     this.checkedAll = false;
    //   }
    // },
    // selectedList2(v) {
    //   if (v.length == this.options2.length) {
    //     this.checkedAll2 = true;
    //   } else {
    //     this.checkedAll2 = false;
    //   }
    // },
  },
  computed: {},
  mounted() {
    this.searchQuery();
  },
  created() {},
  methods: {
    comfirmType(v) {
      this.params.handleType = v;
      this.searchQuery();
    },
    comfirmType2(v) {
      this.params.executorStatus = v;
      this.searchQuery();
    },
    onSearch(v) {
      this.keyword = v;
      console.log(this.keyword);
      this.searchQuery();
    },
    onScreen() {
      console.log("筛选");
      this.keyword = this.$refs.topSearch.value;
      this.propsForSon = {
        keyword: this.$refs.topSearch.value,
        handleType: this.params.handleType,
        handleTypeText: this.params.handleTypeText,
        executorStatus: this.params.executorStatus,
        executorStatusText: this.params.executorStatusText,
      };
      this.showSearchTag = true;
      this.title = "更多筛选";
    },
    resetCategory() {
      this.showSearchTag = false;
    },
    getCategory(p, k) {
      this.params = p;
      this.selectedList = p.handleType ? p.handleType.split(",") : [];
      this.selectedList2 = p.executorStatus ? p.executorStatus.split(",") : [];
      this.keyword = k;
      this.showSearchTag = false;
      console.log(this.params,this.selectedList2,'selectedList2');
      this.$refs.topSearch.value = k;
      this.title = "不合格品处理待执行";
      this.searchQuery();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    // 列表动态按钮
    asyncBtn(item) {
      if (item.executorStatus == "already_execute") {
        return "执行详情";
      } else {
        if (item.handleType == "scrap") {
          return "报废入库";
        } else if (item.handleType == "repair") {
          return "发起返修";
        } else if (item.handleType == "compromise") {
          return "确认接收";
        } else {
          return "";
        }
      }
    },
    // 操作
    actions(item) {
      if (item.executorStatus == "already_execute") {
        this.$router.push({
          path: "/workManagement/executionDetail",
          query: { id: item.id, handleType: item.handleType },
        });
      } else {
        if (item.handleType == "scrap") {
          this.$router.push({
            path: '/workManagement/scrapIntoStorageForm',
            query: { formData: item }
          })
        } else if (item.handleType == "repair") {
          let {
            id,
            reportWorkUnit,
            reportWorkRate,
            orderId,
            orderCode,
            batchId,
            batchCode,
            goodsName,
            spec,
            processFullName,
            basicUnitText,
            operatorIdText,
            applicantIdText,
            applyTime,
            handleTypeText,
            handlerIdText,
            handleTime,
            num,
            reportWorkUnitText,
          } = item;
          let formData = {
            id,
            reportWorkUnit,
            reportWorkRate,
            orderId,
            orderCode,
            batchId,
            batchCode,
            goodsName,
            spec,
            processFullName,
            basicUnitText,
            operatorIdText,
            applicantIdText,
            applyTime,
            handleTypeText,
            handlerIdText,
            handleTime,
            num,
            reportWorkUnitText,
          };
          formData.oldTaskId = item.taskId;
          this.$router.push({
            path: "/workManagement/initiateARepair",
            query: { formData },
          });
        } else if (item.handleType == "compromise") {
          this.compromisingItem = item;
          this.showDialog = true;
        } else {
          return "";
        }
      }
    },
    compromising() {
      messNotQualityHandleIinfoDetailExecuteCompromise(
        this.compromisingItem
      ).then((res) => {
        if (res.code == 200) {
          this.$toast("让步接收成功！");
          this.searchQuery();
        } else {
          this.$toast("让步接收失败！");
        }
      });
    },
    //列表点击事件
    handleList(id, item, type) {
      if (item.executorStatus == "already_execute") {
        this.$router.push({
          path: "/workManagement/executionDetail",
          query: { id, handleType: item.handleType },
        });
      }
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery() {
      // 搜索条件
      let queryParam = {
        ...this.params,
      };
      queryParam.keyword = this.keyword
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-content {
  height: 100vh;
  overflow-y: hidden;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.foot-slot {
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  color: #1890ff;
}
.search-bottom {
  height: 0.5rem;
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.11rem;
  .btnconfirm {
    width: 1.72rem;
    height: 0.39rem;
    background: #1890ff;
    border-radius: 0rem;
    text-align: center;
    line-height: 0.39rem;
    color: #fff;
  }
  .btncancel {
    width: 1.72rem;
    height: 0.39rem;
    background: #f6f6f6;
    border: 0.01px solid rgba(25, 31, 37, 0.12);
    border-radius: 0rem;
    text-align: center;
    line-height: 0.39rem;
  }
}
.label {
  margin-left: -0.03rem;
  margin-top: -0.1rem;
  span {
    height: 0.16rem;
    background: #f0f6fe;
    color: #1890ff;
    margin-right: 0.1rem;
    padding: 0.03rem 0.08rem;
    font-size: 0.11rem;
    border-radius: 0.03rem;
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
/deep/.van-nav-bar {
  z-index: 99!important;
}
</style>